<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人脸信息采集窗口</title>
    <%--    <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>--%>
    <script src="${ctx}/public/js/jquery-1.9.1.min.js"></script>
    <script src="${ctx}/public/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${ctx}/public/js/xadmin.js"></script>
    <%--    <script src="res/js/jquery.js"></script>--%>
    <style type="text/css">
        .line {

            position: absolute;

            top: 300px;
            left: -80px;

            z-index: 2;

            height: 15px;
            width: 300px;

            background: linear-gradient(#33ffff, #66cccc, #99cccc);
            opacity: 0.7; /* 标准的语法 */

            /*动画效果*/

            animation: myScan 3s infinite alternate;

            -webkit-animation: myScan 3s infinite alternate;

        }

        @keyframes myScan {

            from {
                top: 5px;
            }

            to {
                top: 300px;
            }

        }

        -webkit-

        @keyframes myScan {

            from {
                top: 5px;
            }

            to {
                top: 600px;
            }

        }

        .box {
            background-image: url('${ctx}/public/image/bg.jpg');
            width: 100%;
            height: 900px;
            background-size: 100%, 100%;
        }

        .video {
            width: 500px;
            height: 500px;
            margin: auto;
        <%--background-image: url('${ctx}/public/image/faceBorder.png')--%>
        }

    </style>
</head>
<body>
<div class="box">
    <div class="right">
        <div class="video">

            <!-- <div class="line"></div> -->

            <video id="myVideo" src="" class="video"></video>

        </div>
        <canvas id="myCanvas" width="600" height="400" hidden="hidden"></canvas>
        <input id="useFor" name="useFor" value="${useFor}" hidden="hidden"/>
        <div></div>
        <script>
            var myVideo = document.getElementById('myVideo');
            navigator.mediaDevices.getUserMedia({
                video: true
            }).then(function (mediaStream) {
                myVideo.srcObject = mediaStream;
                myVideo.onloadedmetadata = function () {
                    /* myVideo.controls = "controls"; 不显示控件*/
                    myVideo.play();
                }
            });


            // 上传图片并开始循环验证
            function startVerify() {
                let useFor = ($("#useFor").val()) * 1;
                var canvas = document.getElementById('myCanvas').getContext('2d');
                canvas.drawImage(myVideo, 0, 0);
                //将图片Base64 转成文件
                var imgSrc = document.getElementById("myCanvas").toDataURL(
                    "image/png").split("base64,")[1];
                $.ajax({
                    type: "POST",
                    async: false,
                    url: '/match',
                    data: {
                        message: imgSrc,
                        useFor: useFor,
                    },
                    dataType: "json",
                    success: function (result) {
                        if (useFor === 1) {
                            if (result.success) {
                                $("#useFor").next().html("<audio src=\"${ctx}/public/audio/addSuccess.mp3\" autoplay=\"autoplay\" hidden=\"true\"/>")
                                setTimeout(function () {
                                    x_admin_close();
                                }, 1000);
                            }
                        } else if (useFor === 2) {
                            if (result.success) {
                                let tip = result.data;
                                $("#useFor").next().html("<audio src=\"${ctx}/public/audio/loginSuccess.mp3\" autoplay=\"autoplay\" hidden=\"true\"/>")
                                setTimeout(function () {
                                    window.location.replace("${ctx}/login/" + tip);
                                }, 1000);
                            }
                        }
                    }
                })
                //每隔一秒执行一次函数截图
                setTimeout(startVerify, 1000);    //setTimeout是超时调用，使用递归模拟间歇调用,
            }

            setTimeout(startVerify, 1000);    //1s后执行

        </script>
    </div>
</div>
</body>
</html>